<template>
  <div class="root-list">
    <div
      class="item"
      v-for="(item, index) in list"
      @click="goDetail(item.id, index)"
      :key="item.id"
    >
      <img
        ref="pics"
        class="pic"
        src="@/assets/imgs/con2/b2.png"
        :id="item.id"
      />
      <div class="info">
        <div class="title">{{ item.title }}</div>
        <div class="tip">{{ item.tip }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const list = ref([{ id: 1, title: "一杯柠檬水儿", tip: "甘甜，鲜榨" }]);

const pics = ref(null);

async function goDetail(id, index) {
  // router.push(`/detail/${id}`);

  // pics.value[index].style.viewTransitionName = "pic";
  const trans = document.startViewTransition(() => {
    router.push(`/detail/${id}`);
  });

  console.log("trans", trans);
  const e = await trans.updateCallbackDone;

  console.log("updateCallbackDone", e);
  const e1 = await trans.ready;

  console.log("ready", e1);
  const e2 = await trans.finished;
  trans.skipTransition();
  console.log("finished", e2);
}
</script>

<style lang="less" scoped>
.root-list {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0.2rem;
  background-color: #f7f7f7;
  min-height: 100vh;

  .item {
    background-color: #fff;
    border-radius: 0.04rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0.2rem;
    gap: 0.2rem;
    & + .item {
      margin-top: 0.2rem;
    }
    .pic {
      width: 2rem;
      height: 2rem;
      flex: none;
      object-fit: cover;
      view-transition-name: pic;
    }

    .info {
      flex: auto;
      .title {
        box-sizing: border-box;
        font-size: 0.48rem;
        padding: 0.2rem;
        font-size: 0.32rem;
        color: #000;
        width: fit-content;
      }
      .tip {
        margin-top: 0.2rem;
        font-size: 0.14rem;
        box-sizing: border-box;
        padding: 0.1rem 0.2rem 0.2rem;
        color: #aaa;
      }
    }

    &.trans {
      .pic {
        view-transition-name: pic;
      }
      .title {
        view-transition-name: title;
      }
      .tip {
        view-transition-name: tip;
      }
    }
  }
}
</style>